$bookmarksBaseScale: 13px;
$barBg: #fdfeff;
$barBgHover: #e9eaec;
$barBorder: #b6b4b6;
$barTitleBg: #E2E2E2;
$barTitleBgHover: darken($barTitleBg, 5%);
$barBtnBorder: lighten($barBorder, 15%);
$barBgDark: #323639;
$barBgHoverDark: #424649;
$barBorderDark: #2C2F32;
$barTitleBgDark: #565C61;
$barTitleBgHoverDark: lighten($barTitleBgDark, 15%);
$barBtnBorderDark: darken($barBorderDark, 5%);
$barHeight: 22px;
$barMaxWidth: 9.7em;
$barFontFamily: "Roboto", sans-serif;
$barFontWeight: 300;

.bookmarksBar {
  font-size: $bookmarksBaseScale;
}

.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  background: $barBg;
  color: black;
  padding: .4em .6em;
  border-bottom: 1px solid $barBorder;
  z-index: z('tabBookmarks');
  @media (prefers-color-scheme: dark) {
    background: $barBgDark;
    border-bottom-color: $barBorderDark;
    color: white;
  }
}

.barTitle,
.barScroll,
.barLink,
.barFolder {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex: 0 0 auto;
  height: $barHeight;
  margin: 0 .1em;
  padding: 0 .5em;
  border: 0;
  background-color: transparent;
  color: inherit;
  text-decoration: none;
  cursor: default;
  border-radius: ($barHeight / 2);
  &:hover:not(:disabled),
  &:focus:not(:disabled) {
    outline: none;
    background-color: $barBgHover;
    @media (prefers-color-scheme: dark) {
      background-color: $barBgHoverDark;
    }
  }
  &:disabled {
    opacity: .15;
  }
}

.barList {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  list-style: none;
  overflow: hidden;
  border-top: 0;
  border-bottom: 0;
}

.barTitle {
  background-color: $barTitleBg;
  font-weight: 700;
  @media (prefers-color-scheme: dark) {
    background-color: $barTitleBgDark;
  }
  &:hover:not(:disabled),
  &:focus:not(:disabled) {
    background-color: $barTitleBgHover;
    @media (prefers-color-scheme: dark) {
      background-color: $barTitleBgHoverDark;
    }
  }
}

.barIcon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  font-size: 16px;
}

.barIcon + .barLabel {
  margin-left: .6em;
}

.barLabel {
  flex: 1 1 auto;
  position: relative;
  white-space: nowrap;
  max-width: ($barMaxWidth - .1);
  text-overflow: clip;
  overflow: hidden;
  line-height: $barHeight;
  font-weight: $barFontWeight;
  font-family: $barFontFamily;
  &::after {
    content: '';
    width: $barMaxWidth;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: ($barHeight / 2);
  }
}

.barLink,
.barFolder {
  .barLabel::after {
    background: linear-gradient(to right, rgba($barBg, 0) 0%, rgba($barBg, 0) 80%, rgba($barBg, 1) 100%);
    transition: background-color .2s;
    @media (prefers-color-scheme: dark) {
      background: linear-gradient(to right, rgba($barBgDark, 0) 0%, rgba($barBgDark, 0) 80%, rgba($barBgDark, 1) 100%);
    }
  }
  &:hover:not(:disabled),
  &:focus:not(:disabled) {
    .barLabel::after {
      background: linear-gradient(to right, rgba($barBgHover, 0) 0%, rgba($barBgHover, 0) 80%, rgba($barBgHover, 1) 100%);
      @media (prefers-color-scheme: dark) {
        background: linear-gradient(to right, rgba($barBgHoverDark, 0) 0%, rgba($barBgHoverDark, 0) 80%, rgba($barBgHoverDark, 1) 100%);
      }
    }
  }
}

.barTitle {
  .barLabel::after {
    background: linear-gradient(to right, rgba($barTitleBg, 0) 0%, rgba($barTitleBg, 0) 80%, rgba($barTitleBg, 1) 100%);
    transition: background-color .2s;
    @media (prefers-color-scheme: dark) {
      background: linear-gradient(to right, rgba($barTitleBgDark, 0) 0%, rgba($barTitleBgDark, 0) 80%, rgba($barTitleBgDark, 1) 100%);
    }
  }
  &:hover:not(:disabled),
  &:focus:not(:disabled) {
    .barLabel::after {
      background: linear-gradient(to right, rgba($barTitleBgHover, 0) 0%, rgba($barTitleBgHover, 0) 80%, rgba($barTitleBgHover, 1) 100%);
      @media (prefers-color-scheme: dark) {
        background: linear-gradient(to right, rgba($barTitleBgHoverDark, 0) 0%, rgba($barTitleBgHoverDark, 0) 80%, rgba($barTitleBgHoverDark, 1) 100%);
      }
    }
  }
}
